<template>
    <div class="box">
        <el-row>
            <el-col :span="12">
                <div class="contentLoad">
                    <el-upload drag :action="uploadUrl()" :show-file-list="false"
                               :on-success="handleAvatorSuccess"
                               :before-upload="beforeAvatorUpload">
                        <i class="el-icon-upload"></i>
                        <div>
                            将文件拖到此处，或<span style="color: blue">上传文件</span>
                        </div>
                        <div slot="tip">只能上传csv/xlsx，且不能超过10MB</div>
                    </el-upload>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="content">
                    <ul style="list-style: none">
                        <li v-for="(item, index) in resultData" :key="index">
                            第{{index + 1}}条新闻属于：{{item.tag}}
                        </li>
                    </ul>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "MoneyNews",
        data(){
            return{
                resultData: []
            }
        },
        methods:{
            //上传地址
            uploadUrl(){
                return `http://localhost:8008/oneMany`;
            },
            //上传成功
            handleAvatorSuccess(res){
                this.resultData = res;
            },
            //上传之前的校验
            beforeAvatorUpload(file){
                const isLt10M = file.size / 1024 /1024 < 10;
                if(!isLt10M){
                    this.notify('上传的文件大小不能大于10MB', 'warning');
                    return false;
                }
                return true;

            },
            notify(title, type){
                this.$notify({
                    title: title,
                    type: type
                })
            }
        }
    }
</script>

<style scoped>
.box{
    margin-top: 30px;
    width: 100%;
    height: 100%;
    align-content: center;
}
.content{
    margin: 0 auto;
    width: 500px;
    height: 500px;
    padding-top: 50px;
    text-align: center;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}
.contentLoad{
    margin: 130px auto;
    width: 500px;
    height: 250px;
    padding-top: 50px;
    text-align: center;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}
</style>